<template>
	<!-- 单点评吸（新版本） -->
	<view class="com_view">
		<!-- 表头 -->
		<scroll-view scroll-x="true" class="table_content_x bg">
			<view class="table_header">
				<view class="header_cell" v-for="header in Headers" :key="header.key" :class="header.class">
					<text>{{ header.name }}</text>
					<view class="header_options" v-if="header.options&&header.options.length > 0">
						<view class="header_option" v-for="item in header.options" :key="item.value">
							<text>{{ item.label }}</text>
							<text>{{ item.value }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 表格内容 -->
		<scroll-view scroll-y="true" class="scroll_box_y">
			<view >
				<scroll-view scroll-x="true" class="table_content_x" >
					<view class="table_content">
						<view class="table_col" v-for="header in Headers" :key="header.key" :class="header.class">
							<view v-for="item in tableData" :key="item.id" class="table_cell">
								
								<text v-if="header.type === 'text'">{{ item[header.key] }}</text>
								
								<u-input border="surround" inputAlign="center" fontSize="16px" v-else
								 type="number" @blur="inputBlur(item, header)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'||item.disabled" 
								v-model="item.meetingMonthlyCorrelationRep[header.key]" ></u-input>
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		
		<u-modal :show="tipShow" title="提示" :content='tipText'
		width="300px" owCancelButton="true" cancelText="暂不提示" @cancel="tipCancel"
		@confirm="tipClose" @close="tipClose"></u-modal>
		
		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" 
			@click="submit" :disabled="already"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingMonthly,
		meetingMonthlyCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	
	/** 表格数据 */
	const tableHeader = [
		{
			name:'样品编号',
			key:'number',
			type: 'text',
			class: 'no_class'
		},{
			name:'牌别',
			key:'allowanceName',
			type: 'text',
			class: 'name_class'
		},{
			name:'光泽',
			key:'smokeGloss',
			len: 0.5,
			area: [0, 5],
			options:[ { label: 'Ⅰ', value: '5' },{ label: 'Ⅱ', value: '4' },{ label: 'Ⅲ', value: '3' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'香气',
			key:'smokeAroma',
			len: 0.5,
			area: [0, 32],
			options:[ { label: 'Ⅰ', value: '32' },{ label: 'Ⅱ', value: '28' },{ label: 'Ⅲ', value: '24' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'谐调',
			key:'smokeHarmony',
			len: 0.5,
			area: [0, 6],
			options:[ { label: 'Ⅰ', value: '6' },{ label: 'Ⅱ', value: '5' },{ label: 'Ⅲ', value: '4' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'杂气',
			key:'smokeImpure',
			len: 0.5,
			area: [0, 12],
			options:[ { label: 'Ⅰ', value: '12' },{ label: 'Ⅱ', value: '10' },{ label: 'Ⅲ', value: '8' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'刺激性',
			key:'smokeThrill',
			len: 0.5,
			area: [0, 20],
			options:[ { label: 'Ⅰ', value: '20' },{ label: 'Ⅱ', value: '17' },{ label: 'Ⅲ', value: '15' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'余味',
			key:'smokeAftertaste',
			len: 0.5,
			area: [0, 10],
			options:[ { label: 'Ⅰ', value: '25' },{ label: 'Ⅱ', value: '22' },{ label: 'Ⅲ', value: '20' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'总计',
			key:'smokeTotal',
			isrequest: true,
			type: 'text',
			class: 'total_class'
		},
	]
	
	/** 提示使用的字典项 */
	const tipDict = {
		"smokeGloss": "光泽",
		"smokeAroma": "香气",
		"smokeHarmony": "谐调",
		"smokeImpure": "杂气",
		"smokeThrill": "刺激性",
		"smokeAftertaste": "余味",
	}

	export default{
		name: 'monthlyCom',
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: { // 是否提交过
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 表格数据
				tableData: [],
				tipShow: false, //填写规则不符合的提示
				tipText: "", // 提示内容
				tipShowArr:{
					smokeGloss: true,
					smokeAroma: true,
					smokeHarmony: true,
					smokeImpure: true,
					smokeThrill: true,
					smokeAftertaste: true,
				},
				tipKey: "", //显示的关键词
			}
		},
		computed:{
			Headers() { return tableHeader }, // 表头列表
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData() {
				this.tableData = [];
				const res = await getMeetingMonthly({ allId:this.id })
				console.log("获取到的单点评吸内容", res)
				if(res.code != 200) return;
				let temp = []
				let data = []
				res.data.forEach(ele=>{
					if( ele.status == '0' ) {
						temp.push({ ...ele.meetingMonthlyCorrelationRep, ...ele, disable: true })
					} else {
						data.push({ ...ele.meetingMonthlyCorrelationRep, ...ele })
					}
				})
				this.tableData = [...temp,...data]
				console.log(this.tableData)
			},
			
			inputBlur(row, header) {
				console.log(row, header)
				let form = row.meetingMonthlyCorrelationRep
				let len = header.len|0.1 * 10
				let key = header.key
				let area = header.area||[0,100]
				let loop = this.checkValue(form, key, len, area )
				if(!loop) return;
				
				this.submitCell(form, key)
			},
			// 校验数据
			checkValue(form, key, len, area) {
				this.tipKey = key
				let min = area[0]
				let max = area[1]
				let value = (form[key]||0)* 1
				if(!value) return false
				let remain = value * 10 % 10 % len
				if(remain !== 0||value < min || value > max) {
					form[key] = null
					this.submitCell(form, key)
					// tipText 步长为0.5，请填写整数或小数部分为0.5
					if(value < min || value > max) {
						this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					} else {
						const a = (len/10).toFixed(1)
						this.tipText = `${tipDict[key]}的步长为${a}, 请填写整数或小数部分为${a}或${a}的整数倍`
					}
					this.tipShow = this.tipShowArr[key]
					return false
				}
				return true
			},
			
			// 更改单行数据
			async submitCell(form, key) {
				form.smokeTotal = this.getSmokeTotal(form)
				const res = await meetingMonthlyCorrelation({loading: false, ...form})
				if(res.code != 200) {
					form.smokeTotal = form.smokeTotal - form[key]*1
					form[key] = null
				}
			},
			
			/**返回总值*/
			getSmokeTotal(form) {
				let keys = Object.keys(tipDict)
				let total = 0
				keys.forEach(key=>{
					let value = (form[key]||0)*1
					total += value
				})
				return total
			},
			
			tipClose() {
				this.tipShow = false
			},
			
			tipCancel() {
				this.tipShowArr[this.tipKey] = false
				console.log(this.tipShowArr)
				this.tipShow = false
			},
			
			async submit() {
			
				// 查询填写是否完整
				let isFull = true
				this.tableData.forEach(item => {
					const e = item.meetingMonthlyCorrelationRep
					if (!e.smokeAftertaste || !e.smokeAroma || !e.smokeGloss || !e.smokeHarmony || !e
						.smokeImpure || !e.smokeThrill) {
						isFull = false
						console.log(item);
					}
				})
			
				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})
			
					return false
				}
			
			
			
				this.$emit('c_submit', '单点评吸');
				// this.$emit('update:Index', 1);
			
				const res = await request.put('/ipad/meetingMonthlyCorrelation/submit/' + this.id, {
					allId: this.id
				})
				console.log(res);
			
				this.getData()
			
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		padding: 20px;
		padding-top: 0;
	}
	.table_header {
		display: flex;
		min-width: 100%;
		width: max-content;
		align-items: center;
		justify-content: center;
		background-image: url(@/static/Maskgroup.png);
		padding: 10px 0;
		.header_options {
			width: 100%;
			margin-top: 10px;
			padding: 0 10px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.header_option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-weight: bold;
				color: #999;
			}
		}
	}
	.table_content {
		min-width: 100%;
		width: max-content;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f1f1f1;
		
		.table_cell {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			background-color: #f1f1f1;
			margin-top: 10px;
		}
		
	}
	.table_content_x {
		max-width: 100%;
		--cell-def-w: 150px;
		.header_cell {
			width: var(--cell-def-w);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.table_col {
			width: var(--cell-def-w);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.no_class {
			width: 90px;
		}
		.name_class {
			width: 100px;
		}
		.total_class {
			width: 60px;
		}
	}
	.scroll_box_y {
		width: 100%;
		height: calc(100% - 100px);
	}
	.bg {
		
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
</style>